<template>
	<view class="container-box">
		<view class="tabs-box">
			<view style="padding: 10rpx 20rpx;" :class="[active===index?'active-tabs':'']" :key='index'
				v-for='(item,index)  in list' @click="tabsClick(index)">
				{{item.name}}
			</view>
		</view>
		<view class="content-box" v-if='activityList.length>0'>
			<view class="list-box">
				<view class="item-box" :class="item.isRead==='Y'?'yd_color':'wd_color'" v-for="item in activityList"
					:key='item.id' @click="urlClick(item)">
					<view class="bottom-box">
						<view class="c-box">
							<view class="left-box">{{item.content}}</view>
						</view>
						<view class="c-box">
							<view class="left-box">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png">
			</u-empty>
		</view>
	</view>
</template>
<script>
	import {
		appointRecordList
	} from '@/api/axios/Message.js'
	export default {
		data() {
			return {
				list: [{
					name: '未读',
				}, {
					name: '已读',
				}],
				active: 0,
				activityList: [],
				isRead: 'N'
			}
		},
		props: {
			keyIndex: {
				type: Number
			}
		},
		methods: {
			async tabsClick(index) {
				this.active = index;
				let openId = uni.getStorageSync('openId')
				let customerId = uni.getStorageSync('customerId')
				if (index === 0) {
					this.isRead = 'N'
					let activityObj_N = await appointRecordList({
						params: {
							openId,
							customerId,
							isRead: this.isRead
						}
					})
					activityObj_N.records ? activityObj_N.records : []

					if (activityObj_N.records.length > 0) {
						activityObj_N.records = activityObj_N.records.map(item => {
							item.isRead = this.isRead
							return item
						})
					}
					this.activityList = activityObj_N.records
				} else {
					this.isRead = 'Y'
					let activityObj_Y = await appointRecordList({
						params: {
							openId,
							customerId,
							isRead: this.isRead
						}
					})
					activityObj_Y.records ? activityObj_Y.records : []
					if (activityObj_Y.records.length > 0) {
						activityObj_Y.records = activityObj_Y.records.map(item => {
							item.isRead = this.isRead
							return item
						})
					}
					this.activityList = activityObj_Y.records
				}
			},
			urlClick(item) {
				uni.navigateTo({
					url: '/pages/MessageDetail/index?index=' + this.keyIndex + '&id=' + item.id +
						'&appointPushRecordId=' + item.appointPushRecordId
				})
			},
			async updateMethod() {
				let openId = uni.getStorageSync('openId')
				let customerId = uni.getStorageSync('customerId')

				let activityObj_N = await appointRecordList({
					params: {
						openId,
						customerId,
						isRead: this.isRead
					}
				})
				activityObj_N.records ? activityObj_N.records : []

				if (activityObj_N.records.length > 0) {
					activityObj_N.records = activityObj_N.records.map(item => {
						item.isRead = this.isRead
						return item
					})
				}
				this.activityList = activityObj_N.records
			}
		},

		async created() {
			let openId = uni.getStorageSync('openId')
			let customerId = uni.getStorageSync('customerId')

			let activityObj_N = await appointRecordList({
				params: {
					openId,
					customerId,
					isRead: this.isRead
				}
			})
			activityObj_N.records ? activityObj_N.records : []

			if (activityObj_N.records.length > 0) {
				activityObj_N.records = activityObj_N.records.map(item => {
					item.isRead = this.isRead
					return item
				})
			}

			this.activityList = activityObj_N.records
		}
	}
</script>
<style lang="scss" scoped>
	.container-box {
		background-color: #eaecfa;
		min-height: 100vh;
	}

	.active-tabs {
		color: #216be6;
		// font-size: 32rpx;
		font-weight: 600;
	}

	.title-t {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		border-bottom: 1px dashed #ccc;
		align-items: center;

		view:nth-child(1) {
			font-weight: 600;
		}

		view:nth-child(2) {}
	}

	.item-box {
		padding: 20rpx;
		padding-left: 40rpx;
		font-size: 24rpx;
		width: 100%;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
	}

	.item-box::before {
		content: '';
		position: absolute;
		display: block;
		width: 10px;
		height: 100%;
		top: 0;
		left: 0;
	}

	.wd_color::before {
		background-color: #ff5252;
	}

	.yd_color::before {
		background-color: #5269cc;
	}

	.list-box {
		padding: 20rpx;
		overflow: hidden;
	}

	.bottom-box {
		padding-top: 10rpx;
		overflow: hidden;
		color: #666;
	}

	.c-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.tabs-box {
		display: flex;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff;
	}
</style>